<template>
	<view>
		<!-- <view class="u-navbar" style="">
			<u-navbar back-text="返回" :title-bold="true" title-color="#000000" title="国家助学金申请" :background="background">
			</u-navbar>
		</view> -->
		<view class="content">
			<u-form :model="form" ref="uForm">

				<u-form-item label="" :border-bottom="false">
					<u-tag text="基本情况" shape="circle" />
				</u-form-item>

				<u-form-item required label="学号">
					<u-input :disabled="true" v-model="form.stuId" />
				</u-form-item>

				<u-form-item required label="姓名" prop="name">
					<u-input  v-model="form.name" />
				</u-form-item>
				
				<u-form-item required label="院系" label-position="top" prop="xueyuan">
					<u-input type="select" v-model="form.xueyuan" @click="xueyuanShow = true" :selectOpen="false" />
					<u-select @confirm="confirmXueyuan" v-model="xueyuanShow" :list="xueyuanList"></u-select>
				</u-form-item>
				
				<u-form-item required label="专业" prop="major">
					<u-input  v-model="form.major" />
				</u-form-item>
				
				<u-form-item required label="班级" prop="cla">
					<u-input  v-model="form.cla" />
				</u-form-item>
				
				<u-form-item required label="政治面貌" label-position="top" prop="political">
					<u-input  v-model="form.political" type="select" @click="politicalShow = true"/>
					<u-picker mode="selector" v-model="politicalShow" @confirm="form.political = politicalList[$event]"  :default-selector="[0]" :range="politicalList"></u-picker>
				</u-form-item>
				
				<u-form-item required label="民族" label-position="top" prop="nation">
					<u-input  v-model="form.nation" type="select" @click="nationShow = true"/>
					<u-picker mode="selector" v-model="nationShow" @confirm="form.nation = nationList[$event]"  :default-selector="[0]" :range="nationList"></u-picker>
				</u-form-item>
				
				<u-form-item label="入学年月" label-position="top" prop="schoolYear">
					<u-input :selectOpen="dateShow" type="select" @click="dateShow = true;dateStatus = 'schoolYear'" v-model="form.schoolYear" />
				</u-form-item>
				
				<u-form-item required label="性别" label-width="200" label-position="top" prop="gender">
					<u-radio-group v-model="form.gender" >
								<u-radio 
									
									v-for="(item, index) in genderList" :key="index" 
									:name="item.name"
									:disabled="item.disabled"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
				</u-form-item>
				
				
				<u-form-item label-position="top" required label="身份证号码" prop="sfId">
					<u-input v-model="form.sfId" />
				</u-form-item>
				
				<u-form-item label-position="top" required label="联系方式" prop="tel">
					<u-input v-model="form.tel" />
				</u-form-item>
				<u-form-item label-position="top" required label="邮政编码" prop="postCode">
					<u-input v-model="form.postCode" />
				</u-form-item>

				<!-- <u-form-item required label="" :border-bottom="false">
					<u-button size="medium">核对个人信息</u-button>
				</u-form-item> -->

				<u-form-item label="" :border-bottom="false">
					<u-tag text="家庭情况" shape="circle" />
				</u-form-item>
				
				
				
				
				<u-form-item required label="家庭人口困难等级" label-width="200" label-position="top" prop="kunnanLevel">
					<u-radio-group v-model="form.kunnanLevel" @change="kunnanLevelRadioGroupChange">
								<u-radio 
									@change="kunnanLevelRadioChange" 
									v-for="(item, index) in kunnanLevelList" :key="index" 
									:name="item.name"
									:disabled="item.disabled"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
				</u-form-item>


				<u-form-item required label="家庭人口总数" label-width="200" label-position="top" prop="famliyCount">
					<u-input type="select" @click="openKeyboard({key:'famliyCount'});keyboardShow = true"
						v-model="form.famliyCount" />
				</u-form-item>

				<u-form-item required label="家庭人均月收入" label-width="200" label-position="top" prop="familyMouthIncome">
					<u-input placeholder="请注意是`月`收入!" placeholderStyle="color: #fab6b6" v-model="form.familyMouthIncome"
						type="select" @click="openKeyboard({key:'familyMouthIncome'});keyboardShow = true" />
				</u-form-item>


				<u-form-item required label="家庭住址" label-width="200" label-position="top" prop="familyRegion">
					<u-input v-model="form.familyRegion" type="select" @click="regionShow = true" />
				</u-form-item>

				<u-form-item required label="镇、村,门牌号" label-width="200" label-position="top" prop="familyRegionDetail">
					<u-input v-model="form.familyRegionDetail" />
				</u-form-item>

				<u-form-item required label="申请理由" label-width="200" label-position="top" prop="applyReason">
					 <u-input v-model="form.applyReason" maxlength="200" type="textarea" placeholder="申请理由,家庭情况,在校表现,150-200字" />
					 <text style="margin-bottom: -80rpx;">{{form.applyReason.length || 0}}/200</text>
				</u-form-item>

				<u-form-item required label="申请理由类型" label-width="200" label-position="top" prop="applyReasonType">
					<view class="" style="width: 100%;">
						<view class="">
							<u-input type="select" v-model="form.applyReasonType" @click="openPicker()" />
						</view>
						<view class="">
							请根据所填写的<text style="color: #fa3534;">申请理由</text>选择一个合适的类型                                  
						</view>
					</view>
				</u-form-item>
				
				<u-form-item v-if="applyReasonRemarkShow" required label="备注" label-width="200" label-position="top" prop="applyReasonRemark">
					<u-input v-model="form.applyReasonRemark" maxlength="100" type="textarea" :placeholder="remark" />
					<text style="margin-bottom: -80rpx;">{{form.applyReasonRemark.length || 0}}/100</text>
				</u-form-item>
				
				

			</u-form>
			<view class="submit" style="margin-top: 80rpx;padding-bottom: 40rpx;">
				<u-button @click="submit">{{'提交'}}</u-button>
			</view>
		</view>

		<!-- 弹出层组件 -->
		<view class="u-keyboard">
			<u-keyboard ref="uKeyboard" :mode="keyboardMode" @change="valChange" @backspace="backspace"
				:dot-enabled="false" v-model="keyboardShow">
				<u-input :custom-style="{fontSize:'18px'}" input-align="center" placeholder="" :disabled="true"
					v-model="keyboardText" />
			</u-keyboard>
		</view>

		<view class="region">
			<u-picker mode="region" v-model="regionShow" :default-region='["广东省", "广州市", "番禺区"]'
				@confirm="pickerConfirm"></u-picker>
		</view>

		<view class="select">
			<u-select v-model="pickerShow" :list="pickerList" @confirm="selectConfirm"></u-select>
		</view>
		
		<!-- 日期选择组件 -->
		<view class="">
			<u-picker mode="time"  v-model="dateShow" :params="params" @confirm="dateChange"></u-picker>
			<!-- <u-calendar v-model="dateShow" mode="date" @change="dateChange"></u-calendar> -->
		</view>
	</view>
</template>

<script>
	var that;// 当前页面对象
	var vk; //vk依赖
	import {getXueyuanList, getKunnanInfo} from "@/api/kunnan.js"
	import {getHelpStudent} from "@/api/student.js"
	import {addGuozhu} from "@/api/guozhu.js"
	var national = require("../../../static/national.js");
	national = national.national;
	
	export default {
		data() {
			return {
				remark:`对申请理由进行简述,100字以内,(不能存在^ , ; ' <> "" ? 空格 回车)`,
				dateStatus:'',
				xueyuanShow:false,
				applyReasonRemarkShow:false,
				dateShow:false,
				xueyuanList:[],
				politicalList:['中共党员','中共预备党员','共青团员','群众'],//政治面貌数组
				politicalShow:false,//政治面貌显示
				nationList:[],//民族数组
				nationShow:false,//控制民族显示
				cla:'',
				issubmited:false,//控制提交按钮显示
				applyReasonTypeText:'',
				applyReasonTextNum: 0,
				pickerList: [],
				kunnanLevelList:[{
					key:'0',
					name:'一般困难',
					disabled:false
				},{
					key:'1',
					name:'困难',
					disabled:false
				},{
					key:'2',
					name:'特别困难',
					disabled:false
				}],
				genderList:[{
					key:'0',
					name:'男',
					disabled:false
				},{
					key:'1',
					name:'女',
					disabled:false
				}],
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				keyboardText: '',
				key: '',
				regionShow: false,
				pickerShow: false,
				keyboardShow: false,
				keyboardMode: "number",
				background: {
					backgroundColor: '#fff',
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',

					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				form: {
					stuId:uni.getStorageSync('stuId'),//学号
					deptId:'',//部门id
					name: '',//姓名
					xueyuan:'',//学院
					major:'',//专业
					cla:'',//班级
					political:'',//政治面貌
					nation:'',//民族
					schoolYear:'',//入学年月
					gender:'',
					sfId:'',//身份证号码
					tel:'',//手机号
					postCode:'',//邮政编码
					kunnanLevel:'',
					famliyCount: '',//家庭人口数
					familyMouthIncome: '',//家庭人均月收入
					familyRegion: '',//家庭地址
					familyRegionDetail: '',//详细地址
					applyReason: '',//申请理由
					applyReasonType: '',//申请理由类型
					applyReasonRemark: '',//备注，选择H类型需要填写备注		
				},
				switchVal: false,
				applyReasonTypeList: [{
						value: 'H',
						label: '其他(H)'
					},
					{
						value: 'A',
						label: '家庭遭受自然灾害(A)'
					},
					{
						value: 'B',
						label: '家庭遭受突发意外事件(B)'
					},
					{
						value: 'C',
						label: '家庭成员因残疾(C)'
					},
					{
						value: 'D',
						label: '年迈而劳动能力弱情况(D)'
					},
					{
						value: 'E',
						label: '家庭适龄就学子女较多(E)'
					},
					{
						value: 'F',
						label: '家庭成员失业(F)'
					},
					{
						value: 'G',
						label: '家庭欠债(G)'
					},
					{
						value: 'I',
						label: '建档立卡家庭(I)'
					},
					{
						value: 'J',
						label: '低保(J)'
					}
				],
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					
					xueyuan: [{
						required: true,
						message: '请选择学院',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					
					major: [{
						required: true,
						message: '请输入专业',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					
					cla: [{
						required: true,
						message: '请输入班级',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					
					
					nation: [{
						required: true,
						message: '请选择民族',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					
					schoolYear: [{
						required: true,
						message: '请选择入学年月',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					
					political: [{
						required: true,
						message: '请选择政治面貌',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					
					tel: [{
						required: true,
						message: '请输入联系方式',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					
					gender: [{
						required: true,
						message: '请选择性别',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					
					sfId: [{
						required: true,
						message: '请输入身份证号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					},{
						trigger: ['change', 'blur'],
						message: '身份证不正确',
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.idCard(value);
						},
						
					}],
					
					postCode: [{
						required: true,
						message: '请输入邮政编码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					},
					{
						max: 6,
						message: '邮政编码长度6位',
						trigger: ['change', 'blur'],
					}
					],
					famliyCount: [{
						required: true,
						message: '请输入家庭总人口数',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					familyMouthIncome: [{
						required: true,
						message: '请输入家庭人均月收入',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					familyRegion: [{
						required: true,
						message: '请选择家庭住址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					familyRegionDetail: [{
						required: true,
						message: '请输入详细住址(村、门牌号)',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					applyReason: [{
							required: true,
							message: '请输入申请理由',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},
						{
							min: 150,
							message: '150字以上',
							trigger: ['change', 'blur'],
						},
						{
							max: 200,
							message: '200字以内',
							trigger: ['change', 'blur'],
						}
					],
					applyReasonType: [{
						required: true,
						message: '请输入申请理由类型',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur']
					}],
					applyReasonRemark: [{
						required: true,
						message: '请输入备注',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur']
					},{
						max:100,
						message: '不超过100字',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							let reg = /[\uFF00-\uFF06][\uFF09-\uFFFF]|[\s,;'<> ""?^]+/
							if (!reg.test(value)) {
								return true
							} else {
								callback(`备注存在特殊字符（如^ , ; ' <> "" ? 空格 回车）或输入法为全角类型，请检查！`)
							}
						},
						trigger: ['change', 'blur']
						
					}],
				}
			}
		},
		watch:{
			'form.xueyuan':function(val){
	
				for (let dept in this.deptList) {
	
					if(val == this.deptList[dept].deptName){
						this.form.deptId = this.deptList[dept].deptId
						return
					}
				}
			},
			'form.applyReasonType':function(val){
				if(val == 'H'){
					this.applyReasonRemarkShow = true
				}
				else {
					this.applyReasonRemarkShow = false
				}
			}
		},
		methods: {
			submit() {
				console.log(this.form)
				this.$refs.uForm.validate(valid => {
					if (valid) {
						vk.setVuex('$app.guozhu',this.form)
						this.form.familyAddress = this.form.familyRegion + this.form.familyRegionDetail
						addGuozhu(this.form).then((data)=>{
							let [err,res ] = data
							uni.showModal({
								title:'提示',
								content:res.data.msg || err,
								showCancel:false,
								success: (res) => {
									if(res.confirm){
										uni.navigateTo({
											url:'/pages/applyList/applyList'
										})
									}
								}
							})
						})
						
						// console.log(this.issubmited);
					} else {
						console.log('验证失败');
					}
				});
			},
			selectConfirm(e){
				// console.log(e)
				this.form.applyReasonType = e[0].value
				
				// this.applyReasonTypeText = e[0].label
			},
			
			confirmXueyuan(e){
				// this.form.deptId = e[0].value
				this.form.xueyuan = e[0].label
			},
			
			pickerConfirm(e) {

				this.form.familyRegion = e.province.label + e.city.label + e.area.label
			},
			openPicker() {
				this.pickerList = this.applyReasonTypeList
				this.pickerShow = true
			},
			openKeyboard(e) {
				this.keyboardText = this.form[e.key];
				this.key = e.key;
			},
			valChange(val) {

				// 将每次按键的值拼接到value变量中，注意+=写法
				this.form[this.key] += val;
				this.keyboardText = this.form[this.key];
				// console.log(val);
			},
			dateChange(e) {
				switch (this.dateStatus) {
					case 'AwardTime':
						// 获奖时间
						this.form2.awardTime = String(e.year) + '-' + String(e.month)  
						break
						// 入学时间
					case 'schoolYear':
						this.form.schoolYear = String(e.year) + '年' + String(e.month) + '月'
						break
				}
			
			},
			kunnanLevelRadioGroupChange(){
				
			},
			kunnanLevelRadioChange(){
				
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.form[this.key].length) this.form[this.key] = this.form[this.key].substr(0, this.form[this.key]
					.length - 1);
				this.keyboardText = this.form[this.key];
				// console.log(this.form[this.key]);
			},
			
		},
		onLoad(options){
			that = this;
			vk = that.vk
			that.options = options
			
			
			this.nationList = national
			getXueyuanList().then(data =>{
				let [err, res] = data
				this.deptList = res.data.rows
				res.data.rows.forEach((val)=>{
					
					if(!val.deptName.includes('-')) {
						this.xueyuanList.push({label:val.deptName,value:val.deptId})
					}
					
				})
				console.log(this.xueyuanList)
				
				let localGuozhu = vk.getVuex('$app.guozhu')
				if(JSON.stringify(localGuozhu) != '{}'){
					this.issubmited = true
					
					this.form = localGuozhu
				}
				else {
					getHelpStudent().then(data =>{
						let [err, res] = data
						
						
						this.form = {...this.form,...res.data.data}
					})
				}
			})
			
			
			
			
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	page {
		background-color: #e5e5e5;
	}

	.content {
		max-width: 640px;
		/* height: 100%; */
		background-color: #ffffff;
		padding-left: 40rpx;
		padding-right: 40rpx;

	}
</style>
